<template>
  <Content title="维修大厅">
    <view class="maintenance-hall">
      <view class="action-box">
        <u-row
          justify="space-between"
          gutter="10"
          customStyle="margin-bottom: 10px"
        >
          <u-col span="6">
            <MySelect
              v-model="search.moldGrade"
              placeholder="请选择模具等级"
              :option="grade"
              @change="onRefresh"
            >
            </MySelect>
          </u-col>
          <u-col span="6">
            <MySelect
              v-model="search.urgencyLevel"
              placeholder="请选择维修级别"
              :option="levels"
              @change="onRefresh"
            ></MySelect>
          </u-col>
        </u-row>

        <u-row
          justify="space-between"
          gutter="10"
          customStyle="margin-bottom: 10px"
        >
          <u-col span="6">
            <u-input
              v-model="search.moldName"
              class="input"
              placeholder="请输入模具名称"
              @change="onRefresh"
              clearable
            ></u-input>
          </u-col>
          <u-col span="6">
            <u-input
              v-model="search.moldCode"
              class="input"
              placeholder="请输入模具编号"
              @change="onRefresh"
              clearable
            ></u-input>
          </u-col>
        </u-row>
      </view>

      <view class="header-box">
        <MyNavList :data="headerData" v-model="navIndex"></MyNavList>
      </view>

      <view class="main-box">
        <template v-if="data && data.length === 0">
          <Empty></Empty>
        </template>
        <List
          ref="orderList"
          v-else
          :scrollNoData="scrollNoData"
          :data="data"
          :navIndex="search.maintenanceStatus - 0"
          @ok="ok"
          @itemClick="itemClick"
          @onRefresh="onRefresh"
          @scrollBottom="scrollBottom"
        ></List>
      </view>
    </view>
  </Content>
</template>

<script>
import MySelect from "@/components/mySelect";
import Content from "@/components/content/index.vue";
import Empty from "@/components/empty";
import List from "./components/list.vue";
import MyNavList from "@/components/myNavList.vue";
import fetch from "@/utils/fetch";
import { setPageData } from "@/store/user";
export default {
  components: {
    MySelect,
    Content,
    List,
    MyNavList,
    Empty,
  },
  data() {
    return {
      search: {
        moldCode: "",
        moldName: "",
        repairOrderNo: "",
        repairedBy: "",
        categoryName: "",
        pageNum: 1,
        pageSize: 10,
        maintenanceStatus: "1",
      },
      navIndex: 0,
      grade: [
        { label: "A", value: "A" },
        { label: "B", value: "B" },
        { label: "C", value: "C" },
      ],
      levels: [
        { label: "特急", value: "1" },
        { label: "紧急", value: "2" },
        { label: "一般", value: "3" },
      ],
      headerData: [
        {
          label: "维修确认",
        },
        {
          label: "待模修确认",
        },
        {
          label: "待品质确认",
        },
        {
          label: "送修确认",
        },
        {
          label: "待分配",
        },
        {
          label: "维修中",
        },
        {
          label: "待验收",
        },
        {
          label: "已结单",
        },
        {
          label: "升级中",
        },
      ],
      data: [],
      scroll: false,
      scrollNoData: false,
      isReady: true,
    };
  },
  watch: {
    navIndex(newValue, oldValue) {
      if (newValue === 8) newValue = newValue + 1;
      this.search.maintenanceStatus = newValue + 1 + "";
      this.getList(true);
    },
  },
  onShow: function () {
    console.log("this.isReady0", this.isReady);
    uni.setStorageSync("getSelectLists", "");
    uni.getStorageSync("getSelectList", "");
    this.getList(true);
  },
  onReady: function () {},
  methods: {
    onRefresh() {
      console.log("onRefresh===========");
      this.$loading.open();
      this.getList(true);
    },
    ok() {},
    itemClick() {},
    scrollBottom(next) {
      const that = this;
      if (!that.scrollNoData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList().then(() => {
          next(that.scrollNoData);
        });
        return;
      }
      next();
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      console.log("that.search", that.search);
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (element) obj[key] = element;
        }
      }
      if (obj.maintenanceStatus === "2") {
        obj.maintainStatus = 0;
      }
      if (obj.maintenanceStatus === "3") {
        obj.mQualityStatus = 0;
        obj.maintenanceStatus = "2";
      }
      return fetch("post", "/dms/moldMaintenanceHall/getPage", obj).then(
        ({ data }) => {
          if (that.scroll) {
            if ((data?.records || []).length === 0) {
              that.scrollNoData = true;
            } else {
              that.data.push(...data?.records);
            }
          } else {
            that.data = data?.records || [];
          }
          that.$loading.close();
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
.maintenance-hall {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-box {
  display: flex;
  overflow: auto;
  padding: 0 20px;
  margin-bottom: 10px;
  background-color: #ffffff;

  .header-box-item {
    flex: 1;
    width: 100px;
    min-width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #e0e0e0;
    text-align: center;
  }
}

.action-box {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
.main-box {
  flex: 1;
  overflow: auto;
}
</style>
